<template>
  <div style="padding: 10px">
    <!--    功能区域-->

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-select v-model="seat_number"  clearable placeholder="请选择"  @change="choiceseatNumber">
        <el-option

            v-for="item in seatNumberlist"
            :key="item"
            :label="item"
            :value="item"
        >
        </el-option>
      </el-select>
      <el-tab-pane label="所有订单" name="first">

        <!--    搜索区域-->
        <div style="margin-top: 10px;margin-left: 10px"><span>总价:{{ this.totalPrice }}￥</span></div>
        <span style="margin-left:20px;margin-right: 20px">选择座位号</span>

        <div style="margin: 10px 0">

          <!--          <el-button type="primary" @click="add">新增</el-button>-->
        </div>

        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column  prop="seatNumber"  label="座位号"></el-table-column>
          <el-table-column prop="goodsname" label="菜名" sortable></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="creatTime" label="下单时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-popconfirm title="确认完成？" @confirm="finish(scope.row)">
                <template #reference>
                  <el-button type="warning" style="color: white" >出餐</el-button>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>


        </el-table>
      </el-tab-pane>
<!--      <el-tab-pane label="快要超时订单下单时间超过20分钟）" name="second">-->

<!--        &lt;!&ndash;    搜索区域&ndash;&gt;-->
<!--        <div style="margin: 10px 0">-->

<!--          &lt;!&ndash;          <el-button type="primary" @click="add">新增</el-button>&ndash;&gt;-->
<!--        </div>-->

<!--        <el-table :data="tableData_soon" stripe style="width: 100%">-->
<!--          <el-table-column  prop="seatNumber"  label="座位号"></el-table-column>-->
<!--          <el-table-column prop="goodsname" label="菜名" sortable></el-table-column>-->
<!--          <el-table-column prop="price" label="价格"></el-table-column>-->
<!--          <el-table-column prop="creatTime" label="下单时间"></el-table-column>-->
<!--          <el-table-column fixed="right" label="操作" width="100">-->
<!--            <template #default="scope">-->
<!--              <el-popconfirm title="确认完成？" @confirm="finish(scope.row)">-->
<!--                <template #reference>-->
<!--                  <el-button type="warning" style="color: white" >出餐</el-button>-->
<!--                </template>-->
<!--              </el-popconfirm>-->

<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->


<!--      </el-tab-pane>-->
      <el-tab-pane label="已经超时订单（下单时间超过30分钟）" name="third">

        <!--    搜索区域-->
        <div style="margin: 10px 0">
        </div>
        <el-table :data="tableData_outTime" stripe style="width: 100%">
          <el-table-column  prop="seatNumber"  label="座位号"></el-table-column>
          <el-table-column prop="goodsname" label="菜名" sortable></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="creatTime" label="下单时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-popconfirm title="确认完成？" @confirm="finish(scope.row)">
                <template #reference>
                  <el-button type="warning" style="color: white" >出餐</el-button>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>


        </el-table>


      </el-tab-pane>


    </el-tabs>


  </div>
</template>

<script>


import request from "../../utils/request";

export default {
  name: 'Meal_situation',

  components: {},
  data() {
    return {


      seatlist: [],


      form: {},

      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tableData_soon: [],
      tableData_finish: [],
      tableData_outTime: [],
      activeName: 'first',
      seatNumber: '',
      creatTime: '',
      seatNumberlist:[]
    }
  },

  created() {
    this.load()
    request.get("/order/ProcessingOrder_seat").then(res=>{

     this.seatNumberlist= res.data
    })


  },
  computed: {
    totalPrice() {
      this.tableData_outTime=[],
          this.tableData_soon=[]


      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
//     let date = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
// let date1 =+hh+':'+mf+':'+ss;


      let sum = 0;
      this.tableData.forEach(v => {
        sum += parseInt(v.price);
        console.log(v.creatTime.slice(11));
        let year = v.creatTime.slice(0, 4)
        let month = v.creatTime.slice(5, 7)
        let date = v.creatTime.slice(8, 10)
        let hours = v.creatTime.slice(11, 13)
        let minutes = v.creatTime.slice(14, 16)
        let second = v.creatTime.slice(17, 19)
        let time = (yy - year) * 365 * 24 * 60 * 60
            + (mm - month) * 30 * 24 * 60 * 60
            + (dd - date) * 24 * 60 * 60
            + (hh - hours) * 60 * 60
            + (mf - minutes) * 60
            + (ss - second)



          if (time > 1800) {
            this.tableData_outTime.push(v)
          }else if(1200<time<1800){
            this.tableData_soon.push(v)
          }


      })
      return sum;

    },


  },

  methods: {

    load() {
      request.get("/order/ProcessingOrder", {

      }).then(res => {
        this.tableData = res.data
      })
    },
    choiceseatNumber(){
      this.tableData_soon=[],
          this.tableData_outTime=[]
      request.get("/order/ProcessingOrder", {params:{
          seatNumber:this.seat_number
        }

      }).then(res => {
        this.tableData = res.data
      })

    },
    finish(row){
      request.put("/order/finishOrder",row).then(res=>{


        this.$message({
          message: '操作成功',
          type: 'success'
        });
this.load()
      })
    },

  }
}

</script>
